<template>
  <div class="infomation page">
    <van-nav-bar
        title="基本信息"
        left-arrow
        @click-left="$router.back()"
        @click-right="$router.push({name: 'EditUser'})"
    >
      <template #right>
        <span style="color: #fa59b5">编辑</span>
      </template>
    </van-nav-bar>
    <div class="main-content">
      <div class="item van-hairline--bottom">
        <div class="left">头像</div>
        <div class="right" @click="show = true">
          <img :src="userInfo.header_img">
          <i class="van-badge__wrapper van-icon van-icon-arrow"/>
        </div>
      </div>
      <div class="item van-hairline--bottom">
        <div class="left">真实姓名</div>
        <div class="right"><span class="desc">{{ userInfo.name || '未设置' }}</span>
        </div>
      </div>
      <div class="item van-hairline--bottom">
        <div class="left">性别</div>
        <div class="right"><span class="desc">{{ userInfo.sex === '0' ? '女' : '男' }}</span>
        </div>
      </div>
      <div class="item van-hairline--bottom" @click="$router.push({ name: 'CardList'})">
        <div class="left">银行卡管理</div>
        <div class="right"><span class="desc">{{ userInfo.bankinfos ? userInfo.bankinfos.bankinfo : '未绑定' }}</span><i
            class="van-badge__wrapper van-icon van-icon-arrow"></i>
        </div>
      </div>
      <div class="item van-hairline--bottom">
        <div class="left">手机号码</div>
        <div class="right"><span class="desc-cell-number mar-r-10">188****0001</span>
        </div>
      </div>
    </div>
    <van-popup v-model="show" overlay :close-on-click-overlay="false" style="z-index: 2010; height: 50%;"
               :position="'bottom'">
      <div class="avatarbox">
        <div class="title van-hairline--bottom">
          <i class="van-badge__wrapper van-icon van-icon-cross" @click="show = false, currentIndex = 0"/>
          <div class="text">选择头像</div>
          <div class="btnok" @click="updateAvatar">确定</div>
        </div>
        <div class="content">
          <div class="van-image" :class="item === currentIndex ? 'choose': ''" v-for="item in 20" :key="item">
            <img :src="require('../../assets/img/avatar/' + item + '.png')" @click="changeAvatar(item)"
                 class="van-image__img">
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {Toast} from "vant";
import {updateAvatar, updateUserInfo} from "@api/User";

export default {
  name: "Information",
  computed: mapGetters(["userInfo"]),
  data: function () {
    return {
      currentIndex: 0,
      show: false
    }
  },
  methods: {
    changeAvatar: function (number) {
      this.currentIndex = number;
    },
    updateAvatar: function () {
      let that = this,
          avatar = window.SERVER.RES_URL + require('../../assets/img/avatar/' + this.currentIndex + '.png');
      this.show = false;
      Toast.loading({
        message: "头像设置中, 请稍等片刻",
        duration: 0,
        forbidClick: false,
        onOpened: function () {
            updateAvatar(avatar).then(()=>{
              Toast.clear();
              Toast.success({
                message: "头像更新成功",
                duration: 2000
              })
              that.userInfo.header_img = avatar;
              that.$store.commit("SET_INFO", that.userInfo);
            }).catch(()=>{
              Toast.clear();
            })
        }
      })
    }
  }
};
</script>
<style scoped>
::v-deep .van-icon {
  color: var(--van-nav-bar-icon-color);
}

::v-deep .van-nav-bar__title {
  color: var(--van-nav-bar-title-text-color);
  font-weight: bolder;
}

.van-popup {
  border-top-right-radius: .26667rem;
  border-top-left-radius: .26667rem;
  overflow-y: hidden
}

.avatarbox {
  padding: 0 .26667rem;
  height: 100%;
  color: #fa59b5;
  background-color: #f4ebf3
}

.avatarbox .title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: .37333rem
}

.avatarbox .title .btnok, .avatarbox .title .van-icon {
  padding: .26667rem
}

.avatarbox .content {
  padding-bottom: 1.33333rem;
  height: 100%;
  overflow-y: auto;
  padding-top: .32rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center
}

.avatarbox .content .van-image {
  width: 1.33333rem;
  height: 1.33333rem;
  margin: .26667rem;
  border-radius: 1.33333rem
}

.avatarbox .content .choose {
  border: .08rem solid #fa59b5
}

.infomation {
  background-color: #f4ebf3;
  height: 100%
}

.infomation .nav {
  background: linear-gradient(90deg, #fff, #fff)
}

.infomation .main-content {
  padding: 0 .26667rem;
  background-color: #f5dcf1
}

.infomation .main-content .item {
  padding: .37333rem 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}

.infomation .main-content .item .left {
  font-size: .37333rem;
  color: #fa59b5
}

.infomation .main-content .item .right {
  display: flex;
  flex-direction: row;
  align-items: center
}

.infomation .main-content .item .right img {
  width: 1.33333rem
}

.infomation .main-content .item .right .desc-cell-number, .infomation .main-content .item .right .desc {
  font-size: .42667rem;
  font-weight: 700;
  color: #fa59b5
}

.infomation .main-content .item .right .desc-cell-number.mar-r-10 {
  margin-right: .26667rem
}

.infomation .main-content .item .right .van-icon {
  margin-left: .26667rem;
  color: #fa59b5
}

</style>
